<template>
  <div>
    <van-tabs v-model="isSite">
      <van-tab v-for="(item,index) in err" :key="index" :title="item"></van-tab>
    </van-tabs>
    <van-cell-group>
      <van-cell
        v-for="(item,index) in arr"
        @click="sheng(item)"
        :key="index"
        :title="item"
        value="内容"
      />
    </van-cell-group>
  </div>
</template>

<script>
import area from "../../utils/area";
export default {
  name: "Gsite",
  data() {
    return {
      area: area,
      isSite: 0,
      err: ["请选择", "请选择", "请选择"],
      active: 0,
    };
  },
  mounted() {
    console.log(area);
  },
  methods: {
    sheng(item) {
      console.log(item);
      this.$set(this.err, this.isSite, item);
      if (this.isSite == 2) {
        return;
      } else if (this.isSite == 0) {
        this.err = [item, "请选择", "请选择"];
      } else if (this.isSite == 1) {
        this.err = [this.err[0], item, "请选择"];
      }
      this.isSite++;
    },
  },
  computed: {
    arr() {
      if (this.isSite == 0) {
        return area.province_list;
      } else if (this.isSite == 1) {
        let num = 0;
        for (const key in area.province_list) {
          if (area.province_list[key] == this.err[0]) {
            num = key.substr(0, 2);
          }
        }
        let drr = [];
        for (const key in area.city_list) {
          if (key.substr(0, 2) == num) {
            drr.push(area.city_list[key]);
          }
        }
        return drr;
      } else {
        let num = 0;
        for (const key in area.city_list) {
          if (area.city_list[key] == this.err[1]) {
            num = key.substr(0, 4);
          }
        }
        let drr = [];
        for (const key in area.county_list) {
          if (key.substr(0, 4) == num) {
            drr.push(area.county_list[key]);
          }
        }
        return drr;
      }
    },
  },
};
</script>

<style>
</style>